<template>
  <div class="rank-page">
    <!-- 分类标签 -->
    <div class="rank-tabs">
      <button :class="['tab', currentType === 'power' ? 'active' : '']" @click="switchType('power')">战力排行榜</button>
      <button :class="['tab', currentType === 'level' ? 'active' : '']" @click="switchType('level')">等级排行榜</button>
    </div>

    <!-- 列表区域 -->
    <div class="rank-list card">
      <div v-if="loading" class="loading">加载中...</div>
      <div v-else-if="error" class="error">{{ error }}</div>
      <div v-else-if="allItems.length === 0" class="empty">暂无排行数据</div>
      <template v-else>
        <div class="list-header">
          <div class="col-rank">排名</div>
          <div class="col-name">角色名</div>
          <div class="col-sect">门派</div>
          <div class="col-score">{{ currentType === 'power' ? '战力' : '等级' }}</div>
        </div>
        <div class="list-content">
          <div v-for="(item, idx) in currentPageItems" :key="idx" class="list-item">
            <div class="col-rank">{{ item.index ?? ((currentPage - 1) * pageSize + idx + 1) }}</div>
            <div class="col-name">{{ item.role_name || item.name || '未知侠客' }}</div>
            <div class="col-sect">{{ item.sect_name || '未知门派' }}</div>
            <div class="col-score">{{ item.score ?? 0 }}</div>
          </div>
        </div>
      </template>
    </div>

    <!-- 分页控件 -->
    <div class="pagination">
      <button class="page-btn" :disabled="currentPage === 1 || loading" @click="prevPage">上一页</button>
      <div class="page-info">第 {{ currentPage }} / {{ maxPages }} 页</div>
      <button class="page-btn" :disabled="currentPage >= maxPages || loading" @click="nextPage">下一页</button>
    </div>

    <!-- 我的排名（移动到下方） -->
    <div class="my-rank card" v-if="myRank">
      <div class="my-title">我的排名</div>
      <div class="my-content">
        <div class="col-rank">{{ myRank.index ?? '-' }}</div>
        <div class="col-name">{{ myRank.role_name || '未知侠客' }}</div>
        <div class="col-sect">{{ myRank.sect_name || '未知门派' }}</div>
        <div class="col-score">{{ myRank.score ?? 0 }}</div>
      </div>
    </div>
    
    <!-- CustomTabBar -->
    <CustomTabBar />
  </div>
</template>

<script>
import CustomTabBar from '@/components/CustomTabBar.vue'

export default {
  components: {
    CustomTabBar
  },
  data() {
    return {
      currentType: 'power',
      currentPage: 1,
      pageSize: 20, // 改为20条，每页展示20个
      allItems: [], // 存储所有数据（最多100条）
      myRank: null,
      loading: false,
      error: ''
    }
  },
  computed: {
    // 当前页显示的数据
    currentPageItems() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.allItems.slice(start, end)
    },
    // 总页数
    maxPages() {
      return Math.ceil(this.allItems.length / this.pageSize) || 1
    }
  },
  onLoad() {
    this.fetchRank()
  },
  methods: {
    switchType(type) {
      if (this.currentType === type) return
      this.currentType = type
      this.currentPage = 1
      this.fetchRank()
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
        // 滚动到顶部
        const listContent = document.querySelector('.list-content')
        if (listContent) listContent.scrollTop = 0
      }
    },
    nextPage() {
      if (this.currentPage < this.maxPages) {
        this.currentPage++
        // 滚动到顶部
        const listContent = document.querySelector('.list-content')
        if (listContent) listContent.scrollTop = 0
      }
    },
    async fetchRank() {
      this.loading = true
      this.error = ''
      try {
        const api = (await import('@/api')).default
        // 请求第1页，pageSize设为100获取所有数据
        const res = await api.rank.getRankInfo(this.currentType, 1, 100)
        const list = res?.data?.rank_list || []
        // 存储所有数据
        this.allItems = Array.isArray(list) ? list : []
        this.myRank = res?.data?.my_rank || null
      } catch (e) {
        console.error('获取排行失败', e)
        this.error = e.message || '获取排行失败'
        this.allItems = []
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
/* ========== 武侠风格排行榜 ========== */
.rank-page {
  min-height: 100vh;
  padding: 12px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(12px + 56px + env(safe-area-inset-bottom, 0px)); /* 12px + customBar高度56px + 安全区域 */
  background: linear-gradient(180deg, #e8dcc4 0%, #d4c4a8 100%);
  font-family: "STSong", "Noto Serif SC", serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.rank-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.tab {
  flex: 1;
  padding: 8px 12px;
  border-radius: 16px;
  border: 2px solid #c4a57b;
  background: rgba(255, 255, 255, 0.9);
  color: #6b4f3b;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
  font-size: 14px;
}

.tab:hover {
  border-color: #8b6f47;
  background: rgba(255, 255, 255, 1);
}

.tab.active {
  border-color: #8b6f47;
  background: linear-gradient(135deg, #8b6f47 0%, #6b4f3b 100%);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(139, 111, 71, 0.3);
}

.rank-list {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #c4a57b;
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 3px 10px rgba(139, 111, 71, 0.2);
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.loading, .error, .empty {
  padding: 20px;
  color: #6b4f3b;
  text-align: center;
  font-weight: 600;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.list-header, .list-item {
  display: grid;
  grid-template-columns: 50px 1fr 80px 80px;
  align-items: center;
  padding: 8px 10px;
  gap: 8px;
}

.list-header {
  font-size: 12px;
  color: #8b6f47;
  font-weight: 700;
  border-bottom: 2px solid #d8c7a3;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.5);
}

.list-content {
  flex: 1 1 auto;
  overflow-y: auto; /* 支持滑动 */
  min-height: 0;
  max-height: 600px; /* 限制最大高度，确保可以滑动 */
}

.list-item {
  border-top: 1px solid #e8dcc4;
  transition: all 0.3s ease;
  font-size: 13px;
  min-height: 40px;
}

.list-item:first-child {
  border-top: none;
}

.list-item:hover {
  background: rgba(139, 111, 71, 0.05);
}

.col-name { 
  color: #4a3c2a; 
  font-weight: 600;
  word-break: keep-all; /* 防止单字换行 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden;
  text-overflow: ellipsis;
  writing-mode: horizontal-tb; /* 确保横向显示 */
  text-orientation: mixed; /* 确保文字正常方向 */
}
.col-sect { 
  color: #6b4f3b;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.col-score { 
  color: #8b6f47; 
  font-weight: 700;
  text-align: right;
}
.col-rank { 
  color: #8b6f47; 
  font-weight: 600;
  text-align: center;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  flex-shrink: 0;
}

.page-btn {
  padding: 8px 14px;
  border-radius: 8px;
  border: 2px solid #4b3a2a;
  background: linear-gradient(135deg, #8b6f47 0%, #6b4f3b 100%);
  color: #ffffff;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  font-size: 13px;
}

.page-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 3px 10px rgba(75, 58, 42, 0.3);
}

.page-btn:disabled {
  background: #d0d0d0;
  border-color: #999;
  color: #666;
  cursor: not-allowed;
}

.page-info { 
  color: #6b4f3b; 
  font-weight: 600;
}

/* 我的排名 - 武侠风格 */
.my-rank {
  background: rgba(255, 255, 255, 0.95);
  border: 3px solid #d4af37;
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 8px;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
  flex-shrink: 0;
}

.my-title {
  font-size: 14px;
  color: #4a3c2a;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: 1px;
}

.my-content {
  display: grid;
  grid-template-columns: 50px 1fr 80px 80px;
  align-items: center;
  padding: 6px 10px;
  gap: 8px;
  background: rgba(212, 175, 55, 0.1);
  border-radius: 6px;
  font-size: 13px;
}

.my-content .col-name {
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

.my-content .col-sect {
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.my-content .col-score {
  text-align: right;
}

.my-content .col-rank {
  text-align: center;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .rank-page {
    padding: 8px;
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(8px + 50px + env(safe-area-inset-bottom, 0px)); /* 8px + customBar高度50px + 安全区域 */
  }
  
  .list-content {
    max-height: 500px; /* 移动端调整最大高度 */
  }

  .rank-tabs {
    gap: 6px;
    margin-bottom: 8px;
  }

  .tab {
    padding: 7px 10px;
    font-size: 13px;
  }

  .list-header, .list-item {
    grid-template-columns: 40px 1fr 70px 70px;
    padding: 6px 8px;
    gap: 6px;
    font-size: 12px;
  }

  .list-item {
    min-height: 36px;
  }

  .list-header {
    font-size: 11px;
  }

  .my-rank {
    padding: 8px 10px;
    margin-top: 6px;
  }

  .my-title {
    font-size: 13px;
    margin-bottom: 5px;
  }

  .my-content {
    grid-template-columns: 40px 1fr 70px 70px;
    padding: 5px 8px;
    gap: 6px;
    font-size: 12px;
  }

  .page-btn {
    padding: 6px 10px;
    font-size: 12px;
  }

  .page-info {
    font-size: 12px;
  }
}
</style>